<template>
    <div class="num" ref="num" id="chart3" >NumData</div>
</template>

<!-- 图表的重绘 -->
<script>
import { mapActions } from 'vuex';

export default {
    name: "chart3Component",
    // props: ['option'],
    data() {
        return {
            chartId: 'chart3',
            option: {
                title: {
                    text: '数据统计'
                },
                tooltip: {},
                legend: {
                    data: ['数量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [50, 20, 36, 10, 10, 20]
                    }
                ]
            }
        }
    },
    // 监听数据变化时重新获取数据
    watch: {
        // 监听需要更新图表的数据
        someData: function (newVal) {
            this.updateChart({ id: this.chartId, option: this.getUpdatedOption(newVal) });
        },
    },
    mounted() {
        // console.log('this.id:', this.chartId);
        // console.log('this.option', this.option);
        // this.createChart({ id: this.chartId, option: this.option });
        
        const myChart = this.$echarts.init(this.$refs.num);
        // 指定图表的配置项和数据

        // 使用刚指定的配置项和数据显示图表。
        // console.log('this.option', this.option);
        myChart.setOption(this.option);
        window.addEventListener('resize', this.handleResize);
    },

    beforeDestroy() {
        // this.destroyChart(this.chartId);

        if (this.chart) {
            this.chart.dispose();
            window.removeEventListener('resize', this.handleResize);
        }
    },
    methods: {
        // ...mapActions('charts', ['createChart', 'destroyChart', 'updateChart']),

        handleResize() {
            if (this.chart) {
                this.chart.resize();
            }
        },
    }
}


</script>

<style scoped>
.num {
    height: 300px;
    width: 100%;
}
</style>